<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>上传文件</title>
    <script src="../../static/kaige/js/szload.js"></script>
    <link rel="stylesheet" href="../../static/kaige/css/cropper.min.css" />
    <style>
        .up_job {
            border: 1px dashed #059bb6;
            text-align: center;
            min-height: 100px;
            padding: 20px;
        }

        .up_job i {
            font-size: 48px;
            color: #059bb6;
        }

        .up_job p {
            font-size: 30px;
            color: #059bb6;
        }

        .file_table_img {
            max-height: 30px;
            max-width: 40px;
            border: 0;
        }

        .layui-table img {
            max-width: 40px;
        }

        .fcountbox {
            position: absolute;
            right: 10px;
            top: 10px;
        }

        .layui-table td,
        .layui-table th {
            position: relative;
            padding: 5px 5px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div class="kaige-body">
        <div class="layui-tab layui-tab-brief" style="margin-top: 0;" lay-filter="upload-tab">
            <ul class="layui-tab-title">
                <li class="layui-this"><span class="layui-badge layui-bg-green">1</span>　默认上传</li>
                <li><span class="layui-badge layui-bg-orange">2</span>　图片裁剪</li>
                <li><span class="layui-badge layui-bg-blue">3</span>　文件库选择</li>
            </ul>
            <div class="layui-tab-content" style="height:516px;">
                <!--默认上传-->
                <div class="layui-tab-item layui-show">
                    <form class="kaige-body-form layui-form layui-form-pane" lay-filter="kaige_form_lay_filter">
                        <div class="layui-form-item">
                            <label class="layui-form-label">文件分组</label>
                            <div class="layui-input-inline">
                                <select name="defult_group_id" id="defult_group_id" lay-filter="defult_group_id"></select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">选择文件</label>
                            <div class="layui-input-block">
                                <div class="up_job" id="tab1upfiles">
                                    <i class="fa fa-folder-open"></i>
                                    <p>点击选择上传文件，或将文件拖拽到此区域</p>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上传列表</label>
                            <div class="layui-input-block" style="min-height:300px;">
                                <table class="layui-table" id="filesTable">
                                    <thead>
                                        <tr>
                                            <th style="width: 120px;">操作</th>
                                            <th style="width: 50px;">标识</th>
                                            <th style="width: 180px;">文件名称</th>
                                            <th style="width: 80px;">大小</th>
                                            <th style="width: 150px;">上传进度</th>
                                            <th style="width: 70px;">状态</th>
                                        </tr>
                                    </thead>
                                    <tbody id="filesTableBody"></tbody>
                                </table>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="background:none;border-color:transparent;"></label>
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" id="upfiles_btn"><i
                                        class="fa fa-upload"></i>
                                    提交上传</button>
                                <button type="button" class="layui-btn layui-btn-sm layui-bg-red" id="clear_btn"><i
                                        class="fa fa-recycle"></i>
                                    清空</button>
                                <div class="fcountbox" id="fcountbox"></div>
                            </div>
                        </div>
                    </form>
                </div>
                <!--图片裁剪-->
                <div class="layui-tab-item localfileedit" style="padding: 5px;">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-xs9" style="padding: 2px;">
                            <div class="layui-row">
                                <div class="layui-btn-group">
                                    <label for="cropper_avatarImgUpload" class="layui-btn layui-btn-sm" title="选择文件"><i
                                            class="fa fa-upload"></i> 选择</label>
                                    <input class="layui-upload-file" id="cropper_avatarImgUpload" type="file"
                                        value="选择文件" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff" />
                                </div>
                                <div class="layui-btn-group">
                                    <button type="button" class="layui-btn layui-btn-sm" cropper-event="setDragMode"
                                        data-option="move" title="切换移动"><i class="fa fa-arrows"></i></button>
                                    <button type="button" class="layui-btn layui-btn-sm" cropper-event="setDragMode"
                                        data-option="crop" title="切换裁剪"><i class="fa fa-crop"></i></button>
                                    <button type="button" class="layui-btn layui-btn-sm" cropper-event="rotate"
                                        data-option="-15" title="向左旋转"><i class="fa fa-rotate-left"></i></button>
                                    <button type="button" class="layui-btn layui-btn-sm" cropper-event="rotate"
                                        data-option="15" title="向右旋转"><i class="fa fa-rotate-right"></i></button>
                                </div>
                                <div class="layui-btn-group">
                                    <button type="button" class="layui-btn layui-btn-sm" cropper-event="scaleX"
                                        data-option="-1" title="水平翻转"><i class="fa fa-arrows-h"></i></button>
                                    <button type="button" class="layui-btn layui-btn-sm" cropper-event="scaleY"
                                        data-option="-1" title="垂直翻转"><i class="fa fa-arrows-v"></i></button>
                                </div>
                                <div class="layui-btn-group">
                                    <button type="button" class="layui-btn layui-btn-sm" cropper-event="radio"
                                        data-option="1.7777777777777777" title="16/9">16:9</button>
                                    <button type="button" class="layui-btn layui-btn-sm" cropper-event="radio"
                                        data-option="1.3333333333333333" title="4/3">4:3</button>
                                    <button type="button" class="layui-btn layui-btn-sm" cropper-event="radio"
                                        data-option="1" title="1/1">1:1</button>
                                    <button type="button" class="layui-btn layui-btn-sm" cropper-event="radio"
                                        data-option="0.6666666666666666" title="2/3">2:3</button>
                                    <button type="button" class="layui-btn layui-btn-sm" cropper-event="radio"
                                        data-option="NaN" title="任意">任意</button>
                                </div>
                                <div class="layui-btn-group">
                                    <button type="button" class="layui-btn layui-btn-sm" cropper-event="reset"
                                        title="重置图片"><i class="fa fa-refresh"></i></button>
                                    <button type="button" class="layui-btn layui-btn-sm" cropper-event="destroy"
                                        title="切换原图"><i class="fa fa-power-off"></i></button>
                                </div>
                            </div>
                            <div class="readyimg"
                                style="height:500px;background-color:#f2f2f2; overflow: auto;margin-top: 5px;">
                                <img src="" alt="">
                            </div>
                        </div>
                        <div class="layui-col-xs3" style="padding: 2px;">
                            <div class="layui-row">
                                <div class="layui-btn-group">
                                    <button type="button" class="layui-btn layui-btn-sm" cropper-event="confirmSave"><i
                                            class="fa fa-crop"></i> 裁剪上传</button>
                                </div>
                                <div class="layui-btn-group">
                                    <button type="button" class="layui-btn layui-btn-sm" cropper-event="oldSave"><i
                                            class="fa fa-save"></i> 原图上传</button>
                                </div>
                            </div>
                            <div class="layui-row" style="margin-top: 5px;">
                                <div class="img-preview"
                                    style="width:200px;height:200px;overflow:hidden;background-color:#f2f2f2;"></div>
                            </div>
                            <div class="layui-row" style="margin-top: 5px;">
                                <ul class="file_local_ul">
                                    <li>名称：<span class="filename_txt"></span></li>
                                    <li>大小：<span class="filesize_txt"></span></li>
                                    <li>类型：<span class="filetype_txt"></span></li>
                                    <li>　Ｘ：<input type="text" id="dataX" name="dataX" readonly="true" class="d-input" />
                                        px
                                    </li>
                                    <li>　Ｙ：<input type="text" id="dataY" name="dataY" readonly="true" class="d-input" />
                                        px
                                    </li>
                                    <li>宽度：<input type="text" id="dataWidth" name="dataWidth" readonly="true"
                                            class="d-input" /> px</li>
                                    <li>高度：<input type="text" id="dataHeight" name="dataHeight" readonly="true"
                                            class="d-input" /> px</li>
                                    <li>旋转：<input type="text" id="dataRotate" name="dataRotate" readonly="true"
                                            class="d-input" /> 度</li>
                                    <li>水平：<input type="text" id="dataScaleX" name="dataScaleX" readonly="true"
                                            class="d-input" /></li>
                                    <li>垂直：<input type="text" id="dataScaleY" name="dataScaleY" readonly="true"
                                            class="d-input" /></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!--文件库选择-->
                <div class="layui-tab-item">
                    <div class="filesearch layui-form">
                        <div class="layui-form-item">
                            <div class="layui-input-inline" style="width: 220px;">
                                <select name="group_select_id" lay-filter="files_group_select" id="files_group_select">
                                    <option value=""></option>
                                </select>
                                <input type="hidden" name="group_id">
                            </div>
                            <div class="layui-input-inline" style="width:220px;">
                                <input class="layui-input fsinput" name="keywords" placeholder="图片名称">
                                <button class="fsbutton" lay-event="btn-search" id="btn-search" title="筛选"><i class="layui-icon layui-icon-search"></i></button>
                            </div>
                            <div class="layui-input-inline" style="width:600px;">
                                <div id="filepagebox" class="filepagebox"></div>
                            </div>
                        </div>
                    </div>
                    <div class="files_list">
                        <ul class="files_ul" id="filesList"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        load_init_js(function () {
            layui.config({
                base: szoapcpath + '/static/kaige/layuiextend/'
            }).use(['form', 'layer', 'element', 'cropper', 'laypage', 'upload', 'table', 'kaige'], function () {
                var form = layui.form, layer = layui.layer, $ = layui.$, element = layui.element, laypage = layui.laypage, upload = layui.upload, table = layui.table, kaige = layui.kaige;

                //查看图片
                window.viewImage = function (imgUrl) { kaige.viewimage({ maxwidth: 600, maxheight: 600, url: imgUrl }); }

                var image = $(".readyimg img"),
                    oldfilename = 'default.jpg',
                    dataX = $('#dataX'),
                    dataY = $('#dataY'),
                    dataHeight = $('#dataHeight'),
                    dataWidth = $('#dataWidth'),
                    dataRotate = $('#dataRotate'),
                    dataScaleX = $('#dataScaleX'),
                    dataScaleY = $('#dataScaleY'),
                    options = {
                        aspectRatio: 1 / 1,
                        preview: '.img-preview',
                        viewMode: 1,
                        crop: function (e) {
                            dataX.val(Math.round(e.detail.x));
                            dataY.val(Math.round(e.detail.y));
                            dataHeight.val(Math.round(e.detail.height));
                            dataWidth.val(Math.round(e.detail.width));
                            dataRotate.val(e.detail.rotate);
                            dataScaleX.val(e.detail.scaleX);
                            dataScaleY.val(e.detail.scaleY);
                        }
                    },
                    file = $("input[name='file']");
                image.cropper(options);

                //与调用父窗交互
                function return_parent(d) {
                    setTimeout(function () {
                        parent.file_info({
                            url: d.url,
                            id: d.id,
                            type: d.type,
                            other: d.other ? d.other : ''
                        });
                    }, 200);
                }

                function upload_file(formData) {
                    formData.append('id', getQueryString('id'));
                    $.ajax({
                        type: "POST",
                        url: "/files/upfiles",
                        data: formData,
                        processData: false,
                        contentType: false,
                        sign: 1, //不需要签名
                        success: function (res) {
                            if (res.status) {
                                layer.msg(res.msg, { icon: 1 });
                                layer.closeAll('page');
                                return_parent({
                                    url: res.data.files[0].url,
                                    id: res.data.files[0].id,
                                    type: res.data.files[0].type,
                                    other: res.data.files
                                });
                            } else {
                                layer.alert(res.msg, { icon: 2 });
                            }
                        }
                    });
                }

                function renderSize(value) {
                    if (null == value || value == '') {
                        return "0 Bytes";
                    }
                    var unitArr = new Array("Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB");
                    var index = 0, srcsize = parseFloat(value);
                    index = Math.floor(Math.log(srcsize) / Math.log(1024));
                    var size = srcsize / Math.pow(1024, index);
                    //  保留的小数位数
                    size = size.toFixed(2);
                    return size + unitArr[index];
                }

                $(".localfileedit .layui-btn").on('click', function () {
                    var event = $(this).attr("cropper-event");
                    //监听确认保存图像
                    if (event === 'confirmSave') {
                        if (typeof (file[0]) == "undefined" || file[0].files.length < 1) {
                            layer.msg('请选择一个文件');
                            return;
                        };
                        image.cropper("getCroppedCanvas", {
                            width: dataWidth.val(),
                            height: dataHeight.val()
                        }).toBlob(function (blob) {
                            var formData = new FormData();
                            formData.append('file', blob, oldfilename);
                            upload_file(formData);
                        });
                        //监听旋转
                    } else if (event === 'rotate') {
                        var option = $(this).attr('data-option');
                        image.cropper('rotate', option);
                        //切换移动、裁剪
                    } else if (event === 'setDragMode') {
                        var option = $(this).attr('data-option');
                        image.cropper('setDragMode', option);
                        //重设图片
                    } else if (event === 'reset') {
                        image.cropper('reset');
                        //比例
                    } else if (event === 'radio') {
                        options['aspectRatio'] = $(this).attr('data-option');
                        image.cropper('destroy').cropper(options);
                        //销毁
                    } else if (event === 'destroy') {
                        image.cropper('destroy');
                    } else if (event === 'oldSave') {
                        //原图上传
                        var formData = new FormData();
                        formData.append('file', file[0].files[0]);
                        upload_file(formData);
                    } else if (event === 'scaleX') {
                        var option = $(this).attr('data-option');
                        image.cropper('scaleX', option);
                        $(this).attr('data-option', -option);
                    } else if (event === 'scaleY') {
                        var option = $(this).attr('data-option');
                        image.cropper('scaleY', option);
                        $(this).attr('data-option', -option);
                    }

                    //文件选择
                    file.change(function () {
                        var r = new FileReader();
                        var f = this.files[0];
                        $(".filename_txt").html(f.name);
                        oldfilename = f.name;
                        $(".filesize_txt").html(renderSize(f.size));
                        $(".filetype_txt").html(f.type);
                        r.readAsDataURL(f);
                        r.onload = function (e) {
                            image.cropper('destroy').attr('src', this.result).cropper(options);
                        };
                    });
                });

                //加载分类
                treelist();

                //监听Tab切换
                element.on('tab(upload-tab)', function (d) {
                    //文件库选择
                    if (d.index === 2) {
                        load_filelist(1);
                        //搜索框--回车提交
                        $("input[name=keywords]").on('keyup', function (e) {
                            if (event.keyCode == 13) {
                                $("#btn-search").trigger("click");
                            }
                        });
                        //搜索
                        $("#btn-search").on('click', function (e) {
                            load_filelist(1);
                        });
                    }
                });

                var cur_n = 1;
                function load_filelist(curr) {
                    var limit = 30;
                    var keywords = $("input[name=keywords]").val();
                    var pid = $("input[name=group_id]").val();
                    var list = { page: curr, limit: limit, keywords: keywords, group_id: pid };
                    cur_n = curr;
                    $.ajax({
                        type: 'GET',
                        contentType: 'application/json;charset=UTF-8',
                        url: '/files/index',
                        data: list,
                        success: function (res) {
                            $("#filesList").html('');
                            if (res.code == 0) {
                                var d = res.data;
                                for (var j = 0; j < d.length; j++) {
                                    //prepend 前加 append 后加
                                    $("#filesList").append(
                                        '<li>' + file_select(d[j]) + '<h3 title="' + d[j].name + '">' + d[j].name + '</h3><a href="javascript:;" data-url="' + d[j].url + '" data-id="' + d[j].id + '" data-type="' + d[j].type + '" data-name="' + d[j].name + '" class="layui-btn layui-btn-xs fksel"><i class="fa fa-check"></i> 选择</a><a href="javascript:;" data-url="' + d[j].url + '" data-id="' + d[j].id + '" class="layui-btn layui-btn-xs fkdel"><i class="fa fa-trash-o"></i> 删除</a></li>'
                                    );
                                }
                                laypage.render({
                                    elem: 'filepagebox'
                                    , count: res.count
                                    , limit: limit
                                    , curr: curr
                                    , layout: ['count', 'prev', 'page', 'next', 'refresh']
                                    , jump: function (obj, first) {
                                        //首次不执行
                                        if (!first) {
                                            load_filelist(obj.curr);
                                        }
                                    }
                                });
                                //选择
                                $("#filesList li").find("a.fksel").on('click', function (e) {
                                    var obj = $(this);
                                    return_parent({
                                        url: obj.attr('data-url'),
                                        id: obj.attr('data-id'),
                                        type: obj.attr('data-type'),
                                        other: {
                                            'name': obj.attr('data-name'),
                                        }
                                    });
                                });
                                //删除
                                $("#filesList li").find("a.fkdel").on('click', function (e) {
                                    var id = $(this).attr('data-id');
                                    layer.confirm('彻底删除ID为【' + id + '】的吗？', {
                                        title: '提示',
                                        btn: ['确认', '取消']
                                    }, function () {
                                        $.post("/files/del", { 'id': id }, function (res) {
                                            res.status && load_filelist(cur_n);
                                            layer.msg(res.msg);
                                        });
                                    });
                                });
                            } else {
                                layer.msg(res.msg);
                            }
                        }
                    });
                }

                //加载分类
                function treelist() {
                    $.get('/files/groupList', function (res) {
                        if (res.status) {
                            var html = '<option value="">请选择分组</option>';
                            $(res.data).each(function (index, item) {
                                html += '<option value="' + item.id + '">' + item.name + '</option>';
                            });
                            $("#files_group_select").html(html);
                            $("#defult_group_id").html(html);
                            setTimeout(function () {
                                form.render('select');
                                form.on('select(files_group_select)', function (data) {
                                    $('input[name=group_id]').val(data.value);
                                    load_filelist(1);
                                });
                                form.on('select(defult_group_id)', function (data) {
                                    $('input[name=group_id]').val(data.value);
                                });
                            }, 20);
                        }
                    });
                }

                function default_upfiles() {
                    $('#upfiles_btn').hide();
                    $('#clear_btn').hide();
                    //支持拖拽上传-多文件
                    var uploadFilesStart = upload.render({
                        elem: '#tab1upfiles'
                        , field: 'files[]'
                        , url: '/files/upfiles'
                        , exts: "jpg|png|gif|bmp|ico|zip|avi|mp3|mp4|wav|txt|doc|docx|xls|xlsx|ppt|pptx|pdf"
                        , acceptMime: "image/gif,image/jpeg,image/pjpeg,image/png,image/x-png,image/bmp,image/x-icon,application/zip,application/x-zip-compressed,video/avi,audio/mpeg,video/mp4,audio/wav,text/plain,application/msword,application/vnd.ms-excel,application/vnd.ms-powerpoint,application/pdf"
                        , data: { id: 7 }
                        , multiple: true
                        , allDone: function (obj) { //当文件全部被提交后，才触发
                            clearfiles();
                            $('#fcountbox').html('共选择：' + obj.total + '个，上传成功：' + obj.successful + '个，失败：' + obj.aborted + '个。');
                            $('#upfiles_btn').hide();
                        }
                        , done: function (res, index, upload) { //每个文件提交一次触发一次
                            var is_edit = false;
                            if (res.status) {
                                $('#deluf_' + index).off('click').remove();
                                $('#seluf_' + index).show().on('click', function (e) {
                                    return_parent({
                                        url: res.data.files[0].url,
                                        id: res.data.files[0].id,
                                        type: res.data.files[0].type,
                                        other: res.data.files[0]
                                    });
                                });

                                if (res.data.exist == 1) {
                                    $('#up_status_' + index).html('已上传过');
                                    is_edit = true;
                                } else if (res.data.ok == 1) {
                                    $('#up_status_' + index).html('上传成功');
                                    is_edit = true;
                                } else {
                                    $('#up_status_' + index).html('上传失败');
                                }
                            }
                        }
                        , number: 5 //一次只能选5个
                        , progress: function (n, elem, res, index) {
                            element.progress('up_progress_' + index, n + '%'); //进度条
                        }
                        , auto: false
                        , bindAction: '#upfiles_btn'
                        , choose: function (obj) { // 选择后回调
                            if (isSet('countfiles') && countfiles() > 0) { //每次选择都是新的
                                clearfiles();
                            }
                            $('#filesTableBody').html('');
                            //将每次选择的文件追加到文件队列
                            var files = this.files = obj.pushFile();

                            window.countfiles = function () {
                                var n = 0;
                                for (let x in files) {
                                    n++;
                                }
                                return n;
                            }

                            window.clearfiles = function () {
                                uploadFilesStart.config.elem.next()[0].value = ''; //清空 input file 值
                                for (let x in files) {
                                    delete files[x];
                                }
                            }

                            //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                            var txtobj = $('#fcountbox');
                            obj.preview(function (index, file, result) {
                                var fn = file.name;
                                var ext = (fn.substring(fn.lastIndexOf('.'), fn.length)).replace('.', '');
                                var tr = $(['<tr id="uf_tr_' + index + '">'
                                    , '<td><div class="layui-btn-group"><a class="layui-btn layui-btn-sm deluf" id="deluf_' + index + '"><i class="fa fa-remove"></i> 移除</a><a class="layui-btn layui-btn-sm seluf" id="seluf_' + index + '"> <i class="fa fa-check"></i>选择</a></div></td>'
                                    , '<td>' + file_type_icon({ 'file_ext': ext, url: result }) + '</td>'
                                    , '<td>' + file.name + '</td>'
                                    , '<td>' + files_size_format(file.size) + '</td>'
                                    , '<td><div class="layui-progress layui-progress-big" lay-filter="up_progress_' + index + '" lay-showPercent="yes"><div class="layui-progress-bar"></div></div></td>'
                                    , '<td><span class="layui-badge layui-bg-orange" id="up_status_' + index + '">等待上传</td>'
                                    , '</tr>'].join(''));
                                //删除
                                tr.find('.deluf').on('click', function (e) {
                                    delete files[index]; //删除队列
                                    uploadFilesStart.config.elem.next()[0].value = ''; //清空 input file 值
                                    tr.remove();
                                });
                                tr.find('.seluf').hide();
                                $('#filesTableBody').append(tr);
                                txtobj.html('当前选择：' + countfiles() + '个');
                            });
                            $('#upfiles_btn').show();

                            $('#clear_btn').show().on('click', function (e) {
                                uploadFilesStart.config.elem.next()[0].value = ''; //清空 input file 值
                                for (let x in files) {
                                    delete files[x];
                                }
                                $('#filesTableBody').html('');
                                $('#clear_btn').hide();
                                $('#fcountbox').html('');
                            });
                        }
                    });
                }

                default_upfiles();

            });
        });
    </script>
    <script type="text/html" id="dtrbar">
    <div class="layui-btn-group">
        <button type="button" class="layui-btn layui-btn-xs" lay-event="remove"><i class="fa fa-remove"></i></button>
        <button type="button" class="layui-btn layui-btn-xs" lay-event="selecttr"><i class="fa fa-check"></i></button>
    </div>
</script>
</body>

</html>